<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/index.css">
<style>
	html, body, #app {
		width: 100%;
		height: 100%;
	}
	.flex-container {  
	display: flex;  
	align-items: center; /* 垂直居中 */  
	justify-content: center; /* 水平居中，可选 */  
	height: 100px; /* 或者其他高度 */  
	}
	.d1{
		float: left;
		width: 30%;
		height: 42%;
		margin-top: 20px;
	}
	.d5{
		float: left;
		margin-top: 1%;
		width: 99%;
		height: 23%;
	}
	.d6{
		float: left;
		margin-top: 1%;
		width: 69%;
		height: 42%;
	}
	.c1{
		width: 90%;
		height: 80%;
		margin-right: 3.5%;
	}
	.f1{
		float: left;
	}
	.c5{
		width: 100%;
		height: 100%;
	}
	.c6{
		width: 100%;
		height: 100%;
	}
	.c11{
		width: 85%;
		height: 20%;
		font-size: 20px;
	}
	.u1 li{
		list-style: none;
		height: 100%;
		width: 85%;
	}
	.u1 li span{
		padding: 8px;
        text-align: center;
		width: 20%;
		height: 30%;
		font-size: 20px;
    }

	.cc5{
		width: 100%;
		height: 80%;
		margin-top: 5px;
	}
	.u5{
		list-style: none;
	}
	.u5 li span{
		margin-right: 8%;
		margin-left: 3%;
	}
	.top1{
		width: 96%;
		height: 20%;
		background-color: #4CAF50; /* 背景颜色 */
		color: white; /* 字体颜色 */
		font-size: 50px; /* 字体大小 */
		padding: 20px; /* 内边距 */
		border: 2px solid #000; /* 边框 */
		text-align: center; /* 文本居中 */
		border-radius: 10px; /* 边框圆角 */
	}

</style>
</head>
<body>
<div id="app">
	<div class="top1">欢迎使用刷题帮后台</div>

	<div class="d1">
		<el-card class="box-card c1 f1" id="main1">
		</el-card>
		<div class="c11 f1 flex-container">今日总刷题量</div>
	</div>
		
	<div class="d6">
		<el-card class="box-card c6" id="main3">
		</el-card>
	</div>

	<div class="d5">
		<el-card class="box-card c5">
			<div class="cc2 f1">常用操作</div>
			<div class="cc5 f1">
				<ul class="u5">
					<li>
						<span id="s1"><img src="http://127.0.0.1/cloud-other/image/管理1.png"></span>
						<span id="s2" style="margin-left: 60px"><img src="http://127.0.0.1/cloud-other/image/管理2.png"></span>
						<span id="s3" style="margin-left: 50px"><img src="http://127.0.0.1/cloud-other/image/管理3.png"></span>
						<span id="s4" style="margin-left: 60px"><img src="http://127.0.0.1/cloud-other/image/管理4.png"></span>
						<span id="s5" style="margin-left: 60px"><img src="http://127.0.0.1/cloud-other/image/管理5.png"></span>
						<span id="s6" style="margin-left: 50px"><img src="http://127.0.0.1/cloud-other/image/管理6.png"></span>
					</li>
					<li>
						<span>用户管理</span>
						<span>题目管理</span>
						<span>类别管理</span>
						<span>群聊管理</span>
						<span>错题管理</span>
						<span>数据管理</span>
					</li>
				</ul>
			</div>
		</el-card>
	</div>
</div>
<script src="../js/vue.js"></script>
<script src="./js/index.js"></script>
<script src="../back/js/echarts.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/qs.js"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
		qustionnum:[],
		weekqustionnum:[]
	},
	methods: {
		//获取刷题数量
		getquestionnum(){
			axios.post("../cloud-other/doquestion/getquestionnum").then(resp=>{
				this.qustionnum = resp.data.data;
			});
		},
		//查询当周的总刷题数量
		getweekquestionnum(){
			axios.post("../cloud-other/doquestion/getweekquestionnum").then(resp=>{
				this.weekqustionnum = resp.data.data;
			});
		},
		//跳转页面
		fly(f){
			window.parent.toPage("goods/show");
		},
	},
	created(){
		//获取刷题数量
		this.getquestionnum();
		//获取当周刷题数量
		this.getweekquestionnum();
	},
	computed: {
		chartOptions(){
			return {
				    tooltip : {
				        formatter: "{a}{b} : {c}题"
				    },
				    series: [
				        {
				            name: '题目',
				            type: 'gauge',
				            detail: {formatter:'{value}'},
				            data: [{value:this.qustionnum, name: ''}],
				             axisLine: {
				                show: true,
				                lineStyle: {
				                  color: [
				                    [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
				                      {
				                        offset: 0.1,
				                        color: "#FFC600"
				                      },
				                      {
				                        offset: 0.6,
				                        color: "#30D27C"
				                      },
				                      {
				                        offset: 1,
				                        color: "#0B95FF"
				                      }
				                    ])
				                  ]
				                ]
				                  
				                }
				             }
				            
				        }
				    ]
				};
		},
		line(){
			return {
				title: {  
		            text: '近7日总刷题趋势',  // 标题文本
		            left: 'center'        // 标题位置，这里设置为居中  
		        },
			xAxis: {
				type: 'category',
				data: [this.weekqustionnum[0]?.date, this.weekqustionnum[1]?.date, this.weekqustionnum[2]?.date, this.weekqustionnum[3]?.date, this.weekqustionnum[4]?.date, this.weekqustionnum[5]?.date, this.weekqustionnum[6]?.date]
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{	
			        itemStyle : { normal: {label : {show: true}}},   //重点是这句加上了后可以显示数字。不然不显示
					data: [this.weekqustionnum[0]?.a, this.weekqustionnum[1]?.a, this.weekqustionnum[2]?.a, this.weekqustionnum[3]?.a, this.weekqustionnum[4]?.a, this.weekqustionnum[5]?.a, this.weekqustionnum[6]?.a],
				type: 'line',
				smooth: true
				}
			]
			};
		}
	},
	mounted(){
		var chartDom = document.getElementById('main1');  
	    var myChart = echarts.init(chartDom);  
	    myChart.setOption(this.chartOptions);  
	  
	    // 使用 $watch 监听 chartOptions 的变化  
	    this.$watch('chartOptions', (newOptions) => {  
	      myChart.setOption(newOptions);  
	    }, { deep: true });
		
	 // 延迟1秒后初始化图表配置  
	    setTimeout(() => {  
	    	// 第三个图表的初始化  
			var chartDom3 = document.getElementById('main3');
			var myChart3 = echarts.init(chartDom3); 
		    myChart3.setOption(this.line); // 注意这里使用 myChart2 而不是 myChart1  
		  
		    // 第三个图表的 $watch  
		    this.$watch('line', (newOptions) => {  
		      myChart3.setOption(newOptions);
		    }, { deep: true });  
	    }, 500); // 延迟1000毫秒（即1秒）
	}
});
</script>
<script>
document.querySelector('#s1').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止链接的默认行为
    var message = { action: 'changeSrc', newSrc: 'user/show' };
    window.parent.postMessage(message, '*'); // '*' 可以指定具体的源地址以增加安全性
});
document.querySelector('#s2').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止链接的默认行为
    var message = { action: 'changeSrc', newSrc: 'goods/show' };
    window.parent.postMessage(message, '*'); // '*' 可以指定具体的源地址以增加安全性
});
document.querySelector('#s3').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止链接的默认行为
    var message = { action: 'changeSrc', newSrc: 'type/index' };
    window.parent.postMessage(message, '*'); // '*' 可以指定具体的源地址以增加安全性
});
document.querySelector('#s4').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止链接的默认行为
    var message = { action: 'changeSrc', newSrc: 'order/index' };
    window.parent.postMessage(message, '*'); // '*' 可以指定具体的源地址以增加安全性
});
document.querySelector('#s5').addEventListener('click', function(event) {
	event.preventDefault(); // 阻止链接的默认行为
	var message = { action: 'changeSrc', newSrc: 'noq/index' };
	window.parent.postMessage(message, '*'); // '*' 可以指定具体的源地址以增加安全性
});
document.querySelector('#s6').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止链接的默认行为
    var message = { action: 'changeSrc', newSrc: 'data/show' };
    window.parent.postMessage(message, '*'); // '*' 可以指定具体的源地址以增加安全性
});
</script>
</body>
</html>